<template>
	<view class="app">
		<!-- 返回 -->
		<view class="fh">
			<view class="fh-a">
				<u-icon name="arrow-left" size="30px" color="#FFFFFF" @click="goback"></u-icon>
				<text style="font-size: 20px; font-weight: bold; text-align: center; color: white;">热门课程</text>
			</view>
		</view>
		<!-- 双轮播 -->
		<view class="slb">
			<!-- 第一轮播 -->
			<view class="slb-1">
				<u-swiper :list="list1" height="100%" :interval="3000"></u-swiper>
			</view>
			<!-- 第二轮播 -->
			<view class="slb-2">
				<view class="slb-2-a">
					<u-swiper :list="list2" keyName="url" indicator height="100%" :interval="3000"></u-swiper>
				</view>
				<view class="slb-2-b">
					<view class="slb-2-b-a">
						<text style="font-size: 15px; font-weight: bold;">房地产营销培训课程</text>
					</view>
					<view class="slb-2-b-b">
						<view class="slb-2-b-b-a">
							<u-icon name="account" size="20px"></u-icon>
							<text style="font-size: 16px; color: #999999;">EthankDesingn</text>
						</view>
						<view class="slb-2-b-b-b">
							<text>￥<text>99.00</text></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门课程 -->
		<view class="rmkc">
			<!-- 标题 -->
			<view class="rmkc-a">
				<text style="font-size: 25px; font-weight: bold;">热门课程<text
						style="color: #999999; font-size: 16px;">(12)</text></text>
				<text style="color: #999999; font-size: 16px;">每周一9:00更新</text>
			</view>

			<!-- 课程 -->
			<view class="rmkc-b">
				<view class="qbkc-c" v-for="(item,index) in list4" :key="index">
					<view class="qbkc-c-a">
						<image :src="item.image" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="qbkc-c-b">
						<text style="font-weight: bold; font-size: 18px;">{{item.title}}</text>
						<view>
							<text style="font-size: 14px; color: #999999;">{{item.a}}|
								<text style="font-size: 14px; color: #999999;">{{item.b}}</text>
							</text>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view style="display: flex;">
								<u-icon name="account"></u-icon>
								<text style="font-size: 15px; color: #999999;">{{item.name}}</text>
							</view>
							<view>
								<text style="font-size: 20px; color: #FAA007;"><text
										style="font-size: 10px; color: #FAA007;">￥</text>{{item.money}}</text>
							</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="jiazz">
				<view class="jiazz-a u-border-bottom" v-for="(item, index) in aaa" :key="index">
					{{'第' + item + '条数据'}}
				</view>
				<u-loadmore :status="status" />
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				aaa: 0,
				page: 0,
				list4: [{
						image: '/static/u133.png',
						title: '成为演讲高手',
						a: '销售',
						b: '基础入门',
						name: '钱白胜',
						money: '99.00'
					}, {
						image: '/static/u133.png',
						title: '成为演讲高手',
						a: '销售',
						b: '基础入门',
						name: '钱白胜',
						money: '99.00'
					},
					{
						image: '/static/u133.png',
						title: '成为演讲高手',
						a: '销售',
						b: '基础入门',
						name: '钱白胜',
						money: '99.00'
					}
				],
				list1: [
					'/static/u89.png',
					'/static/u85.png',
					'/static/u93.png'
				],
				list2: [{
					url: '/static/u89.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}, {
					url: '/static/u85.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}, {
					url: '/static/u93.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}],

			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			}
		},
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.aaa += 0;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		}
	}
</script>

<style lang="scss">
	.app {
		padding: 0;
		margin: 0;

		// 返回
		.fh {
			width: 100%;
			height: 10vh;
			display: flex;
			/* 设置背景颜色为半透明的白色 */
			background-color: rgba(232, 227, 227, 0.5);
			/* alpha值为0.5，表示半透明 */
			/* alpha值为0.5，表示半透明 */

			/* 增加模糊效果，这里模糊半径增加到20px */
			backdrop-filter: blur(20px);
			/* 你可以根据需要调整这个值 */

			/* 可能还需要设置背景的尺寸和位置，以下为示例 */
			background-size: cover;
			background-position: center;
			position: fixed;
			z-index: 10;

			.fh-a {
				width: 71%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 15px;
			}


		}

		// 双轮播
		.slb {
			width: 100%;
			height: 40vh;

			.slb-1 {
				width: 100%;
				height: 200px;
			}

			.slb-2 {
				width: 86%;
				height: 250px;
				margin: 0 auto;
				position: absolute; // 绝对定位b
				top: 10vh; // 定位到返回按钮下方
				left: 7%; // 由于宽度是90%，左右各留5%的边距
				background: -webkit-linear-gradient(270deg, rgba(219, 218, 252, 1) 0%, rgba(219, 218, 252, 1) 0%, rgba(221, 220, 252, 1) 22%, rgba(223, 220, 251, 1) 54%, rgba(235, 233, 254, 1) 75%, rgba(244, 242, 255, 1) 100%, rgba(244, 242, 255, 1) 100%);

				.slb-2-a {
					width: 100%;
					height: 185px;
				}

				.slb-2-b {
					width: 100%;
					height: 65px;

					.slb-2-b-a {
						width: 100%;
						height: 25px;
						;
					}

					.slb-2-b-b {
						width: 100%;
						height: 40px;
						display: flex;

						.slb-2-b-b-a {
							width: 50%;
							height: 100%;
							display: flex;
							align-items: center
						}

						.slb-2-b-b-b {
							width: 50%;
							height: 100%;
							color: #FAA007;
							font-size: 20px;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}
				}
			}
		}

		//热门课程
		.rmkc {
			width: 86%;
			margin: 0 auto;

			.rmkc-a {
				width: 100%;
				height: 4vh;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.rmkc-b {
				width: 100%;

				.qbkc-c {
					width: 100%;
					margin-top: 20px;
					display: flex;
					justify-content: space-between;

					.qbkc-c-a {
						width: 40%;
						height: 90px;
					}

					.qbkc-c-b {
						width: 58%;
						height: 90px;
						line-height: 30px;
					}
				}
			}
		}

		// 加载中
		.jiazz {
			width: 93%;
			margin: 0 auto;
			height: 100px;

			.jiazz-a {
				padding: 24rpx 0;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}
	}
</style>